Навигация. Передача данных. TextField

➡️Ссылка на репозиторий с кодом этого урока

Передача данных на другой экран

Для передачи данных с помощью аргументов, нужно в методе pushNamed() поместить данные в параметр arguments.

Navigator.pushNamed(context, '/first', arguments: 'Данные о пользователе');

                  

Получить данные на экране куда передали

final data = ModalRoute.of(context)?.settings.arguments;

                  

Передавать будем данные об пользователе, для этого в директории ilb создадим новый файл user.dart и в него добавим обычный класс UserProfile

class UserProfile {  
  final String? name;  
  final String? message;  
  
  UserProfile({this.name, this.message});  
}

                  

Теперь добавим следующие изменения в виджет MainScreen

1. Конвертируем этот виджет в Stateful виджет
2. Добавим состояние
   TextEditingController textController = TextEditingController();
3. Добавим в колонку новый виджет для ввода текста TextFiled
4. Передадим в параметр argumnts объект типа UserProfile

Файл main_screen.dart

import 'package:flutter/material.dart';  
import 'package:flutter_navigation/screens/first_screen.dart';  
import 'package:flutter_navigation/screens/user.dart';  
  
class MainScreen extends StatefulWidget {  
  static const routeName = '/main';  
  
  const MainScreen({super.key});  
  
  @override  
  State<MainScreen> createState() => _MainScreenState();  
}  
  
class _MainScreenState extends State<MainScreen> {  
  // Этот контроллер нужен для управления текстовым полем
  TextEditingController textController = TextEditingController();  
  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title: const Text('Главный экран'), centerTitle: true),  
      backgroundColor: Colors.white,  
      body: SizedBox(  
        width: double.infinity,  
        child: Column(  
          mainAxisAlignment: MainAxisAlignment.center,  
          children: [  
		    // Используем виджет текстового поля
            Padding(  
              padding: const EdgeInsets.all(24.0),  
              child: TextField(  
                controller: textController,  
                decoration: const InputDecoration(  
                  border: OutlineInputBorder(),  
                  labelText: 'Введите имя',  
                ),  
              ),  
            ),  
  
  
            ElevatedButton(  
              onPressed:  
                  () => Navigator.pushNamed(  
                    context,  
                    FirstScreen.routeName,  
                    // Перадаем объект UserProfile
                    // Имя берём из текстового поля
                    arguments: UserProfile(  
                      name: textController.text,  
                    ),  
                  ),  
              child: const Text("Открыть FirstScreen"),  
            ),  
          ],  
        ),  
      ),  
    );  
  }  
}

                  

Файл first_screen.dart

import 'package:flutter/material.dart';  
import 'package:flutter_navigation/screens/second_screen.dart';  
import 'package:flutter_navigation/screens/user.dart';  
  
class FirstScreen extends StatefulWidget {  
  static const routeName = '/first';  
  
  const FirstScreen({super.key});  
  
  @override  
  State<FirstScreen> createState() => _FirstScreenState();  
}  
  
class _FirstScreenState extends State<FirstScreen> {  
  TextEditingController textController = TextEditingController();  
  @override  
  Widget build(BuildContext context) {  
  
    // Получаем данные типа UserProfile с экрана с которого перешли на этот экран
    final data = ModalRoute.of(context)?.settings.arguments as UserProfile;  
  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Первый экран'),  
        backgroundColor: Colors.green[300],  
      ),  
      body: Container(  
        decoration: BoxDecoration(  
          gradient: LinearGradient(  
            colors: [Color(0xFFBFF098), Color(0xFF6FD6FF)],  
            begin: Alignment.topLeft,  
            end: Alignment.bottomRight,  
          ),  
        ),  
        child: SizedBox(  
          width: double.infinity,  
          child: Column(  
            mainAxisAlignment: MainAxisAlignment.center,  
            children: [  
              // Показываем данные с другого экрана
              Text(data.name ?? ''),  

              // Ещё одно текствое поле для сообщения
              Padding(  
                padding: const EdgeInsets.all(24.0),  
                child: TextField(  
                  controller: textController,  
                  decoration: const InputDecoration(  
                    border: OutlineInputBorder(),  
                    labelText: 'Введите сообщение',  
                  ),  
                ),  
              ),  
  
              ElevatedButton(  
                onPressed:  
                    () => Navigator.pushNamed(  
                      context,  
                      SecondScreen.routeName,  
                      arguments: UserProfile(  
                        name: data.name, // передаем данные имени дальше
                        // перадаем сообщение из текстового поля
                        message: textController.text, 
                      ),  
                    ),  
                child: const Text("Открыть 2й экран"),  
              ),  
              ElevatedButton(  
                onPressed: () => Navigator.pop(context),  
                child: const Text("Вернуться Назад"),  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}

                  

Файл second_screen.dart

import 'package:flutter/material.dart';  
import 'package:flutter_navigation/screens/user.dart';  
  
class SecondScreen extends StatelessWidget {  
  static const routeName = '/second';  
  
  const SecondScreen({super.key});  
  
  @override  
  Widget build(BuildContext context) {  
    // Получаем данные типа UserProfile с экрана с которого перешли на этот экран
    final data = ModalRoute.of(context)?.settings.arguments as UserProfile;  
  
    return Scaffold(  
      appBar: AppBar(  
        title: const Text('Второй экран'),  
        centerTitle: true,  
        backgroundColor: Colors.pink[200],  
      ),  
      body: Container(  
        decoration: BoxDecoration(  
          gradient: LinearGradient(  
            colors: [Color(0xFFF098E7), Color(0xFFFFF36F)],  
            begin: Alignment.topLeft,  
            end: Alignment.bottomRight,  
          ),  
        ),  
        child: SizedBox(  
          width: double.infinity,  
          child: Column(  
            mainAxisAlignment: MainAxisAlignment.center,  
            children: [  
              Text(data.name ?? ''),  
              Text(data.message ?? ''),  
              ElevatedButton(  
                onPressed: () => Navigator.pop(context),  
                child: const Text("Вернуться Назад"),  
              ),  
            ],  
          ),  
        ),  
      ),  
    );  
  }  
}